<template>
  <el-card>
    <!-- 面包屑 -->
    <my-bread leavl1="商品管理" leavl2="商品列表"></my-bread>
    <!-- 提示 el-alert -->
    <el-alert
      class="alert"
      title="成功提示的文案"
      type="success"
      center
      show-icon
    >
    </el-alert>
    <!-- 步骤条 -->
    <el-steps
      :active="active"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>
    <!-- 步骤条 -->
    {{ active }}
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      style="height: 300px; overflow: auto"
    >
      <el-tabs @tab-click="tabChange()" v-model="active" tab-position="left">
        <el-tab-pane name="1" label="基本信息">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="form.goods_number"></el-input>
          </el-form-item>

          <el-form-item label="商品分类">
            <!-- 级联选择器 -->
            <el-cascader
              clearable
              expand-trigger="hover"
              v-model="selectedOPtions"
              :options="options"
              :props="defaultProp"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="2" label="商品参数">
          <!-- 显示该三级分类的商品参数 -->
          <el-form-item
            :label="item1.attr_name"
            v-for="(item1, i) in arrDyparams"
            :key="i"
          >
            <!-- 复选框 -->
            <el-checkbox-group v-model="item1.attr_vals">
              <el-checkbox
                border
                :label="item2"
                v-for="(item2, i) in item1.attr_vals"
                :key="i"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="3" label="商品属性">
          <el-form-item
            :label="item.attr_name"
            v-for="(item, i) in arrstaticparams"
            :key="i"
          >
            <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane name="4" label="商品图片">
          <el-form-item>
            <el-upload
              action="http://127.0.0.1:8888/api/private/v1/updata"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :headers="headers"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="5" label="商品内容">
          <el-button type="primary" @click="addGoods()">添加商品</el-button>
          <quill-editor></quill-editor>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </el-card>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      active: "1",
      form: {
        goods_name: "",
        goods_cat: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: [],
        attrs: [],
      },
      //级联选择器绑定的数据
      options: [],
      selectedOPtions: [],
      defaultProp: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      //动态数据的数组
      arrDyparams: [],
      //静态数据的数组
      arrstaticparams: [],
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    };
  },
  created() {
    this.getGoodCate();
  },
  methods: {
    //添加图片
    async addGoods() {
      this.form.goods_cat = this.selectedOptions.join(",");
      const res = await this.$http.post(`goos`, this.form);
      console.log(res);
    },
    //图片上传的方法
    handlePreview(file) {},
    handleRemove(file) {
      // console.log("移除");
      // console.log(file);
      let Index = this.form.pics.findIndex((item) => {
        return item.pic === file.response.data.tmp_path;
      });
      this.form.pics.splice(Index, 1);
      console.log(this.form.pics);
    },
    handleSuccess(file) {
      // console.log("成功");
      // console.log(file);
      this.form.pics = file.data.tmp_path;
    },
    async tabChange() {
      if (this.active === "2") {
        if (this.selectedOPtions.length !== 3) {
          this.$message.warning("请选择三级分类");
          return;
        }
        const res = await this.$http.get(
          `categories/${this.selectedOPtions[2]}/attributes?sel=many`
        );
        // console.log(res);
        this.arrDyparams = res.data.data;
        this.arrDyparams.forEach((item) => {
          item.attr_vals =
            item.attr_vals.length === 0 ? [] : item.attr_vals.trim().split(",");
        });
      } else if (this.active === "3") {
        if (this.selectedOPtions.length !== 3) {
          this.$message.warning("请选择三级分类");
          return;
        }
        const res = await this.$http.get(
          `categories/${this.selectedOPtions[2]}/attributes?sel=only`
        );
        console.log(res);
        this.arrstaticparams = res.data.data;
      }
    },
    //级联选择器
    handleChange() {},
    async getGoodCate() {
      const res = await this.$http.get(`categories?type=3`);
      // console.log(res);
      this.options = res.data.data;
    },
  },
};
</script>

<style>
.alert {
  margin-top: 20px;
}
.ql-editor {
  height: 300px;
}
</style>